<template>
  <div class="pagination">
    <el-pagination
        v-model:current-page="props.pageNo"
        v-model:page-size="props.pageSize"
        :page-sizes="[20, 50, 80, 100,150]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="props.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup>
import { defineEmits,defineProps} from 'vue'
const props = defineProps({
  pageNo: {
    type: Number,
    default: 1
  },
  pageSize: {
    type: Number,
    default: 10
  },
  total: {
    type: Number,
    default: 0
  },
})
const emit = defineEmits({
  'sizeChange': (val) => true,
  'currentChange': (val) => true,
})
const handleSizeChange = (val) => {
  emit('sizeChange', val)
}
const handleCurrentChange = (val) => {
  emit('currentChange', val)
}

</script>

<style lang="scss" scoped>
</style>
